<template>
	<div class="login-wrap">
    <div v-title style="display: none">登录</div>
      <div class="login-content-1">
        <div class="input-wrap">
          <div class="input-content">
            <input class="inputs" placeholder="手机号" type="text" v-model="phone"/>
          </div>
          <div class="input-content">
            <input class="inputs" placeholder="密码" type="password" v-model="password"/>
          </div>
        </div>
      </div>

      <div class="login-confirm">
        <span class="submit" @click="login">登录</span>
      </div>
      <div class="forget">
        <a class="logout" @click="logout">忘记密码？</a>
      </div>
      <div class="register-router"><router-link to="/register">注册 初驾 账号 ></router-link></div>

	</div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
    },
    data() {
      return {
        phone: '',
        password: ''
      };
    },
    methods: {
      login() {
        this.$http.post('api/login/checklogin/', {mobile: this.phone, password: this.password, openid: window.localStorage.openid}).then(response => {
          let msg = response.body.errno;
          if (msg === 1) {
            window.localStorage.cphone = this.phone;
            this.$router.push(this.$route.query.redireat_url);
          }
          if (msg === 0) {
            let errmsg = response.body.message;
            window.alert(errmsg);
            this.$router.go(0);
          }
        });
      },
      logout() {
        this.$router.push({path: '/changepasswd/'});
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border
     背景 灰白 $bg
     主题 红 $$theme
     辅助 蓝 $assist */ 
  .login-wrap
    .login-content-1
      margin-top 55px
    .input-wrap
      padding-left 20px
      padding-right 20px
      color rgb(207,207,206)
      .input-content
        height 40px
        width 100%
        background-color $bg-white
        border-radius 5px
        margin-top 17px
      .inputs
        width: 100%;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 40px;
        padding-left: 18px;
        -webkit-tap-highlight-color rgba(0,0,0,0)
    .forget
      margin-top 17px
      font-size 12px
      float right
      margin-right 20px
      a
        color rgb(87,107,149)
    .login-confirm
      padding-left 20px
      padding-right 20px
      margin-top 18px
      .submit
        display inline-block
        height 40px
        width 100%
        line-height 38px
        border-radius 5px
        font-size 16px
        text-align center
        background-color $theme
        color rgb(255,255,255)
    .register-router
      text-align center
      font-size 13px
      color $theme
      position fixed
      bottom 17px
      left 0px
      right 0px
</style>